<!-- 修改查看个人信息 -->

<template>
  <div class="userInfo">
    <div class="userInfo-form">
      <div class="avatar-uploader userInfoImgBox avatar-view">
        <!-- :on-success="" :before-upload="" -->
        <el-upload action="#" :accept="allowedTypes" :show-file-list="false" :limit="1"
                   :http-request="customUpload">
          <img class="userInfoImg" v-if="userInfo.imageUrl" :src="userInfo.imageUrl">
          <div class="userInfoImgChange"></div>
        </el-upload>
      </div>
      <el-form v-model="userInfo" label-width="120px">
        <el-form-item label="昵称：">
          <el-input v-model="userInfo.name" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item label="手机：">
          <el-input v-model="userInfo.phone" disabled placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="邮箱：">
            <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
        </el-form-item> -->
        <el-form-item label="性别：">
          <el-radio-group v-model="userInfo.sex">
            <el-radio :label="'boy'">男</el-radio>
            <el-radio :label="'girl'">女</el-radio>
            <el-radio :label="'unknown'">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="生日：">
            <el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="个人简介：">
            <el-input type="textarea" v-model="userInfo.introduction" placeholder="请输入个人简介"
                style="width:870px"></el-input>
        </el-form-item> -->
      </el-form>
      <el-button type="primary" round class="userInfo-btn" v-loading="loading" @click="submit"
                 :disabled="loading">保存
      </el-button>
      <el-button type="primary" round class="userInfo-btn"
                 @click="logout">退出登录
      </el-button>
    </div>
  </div>
</template>
<script setup>
import UserApis from '@/apis/user'
import useUserStore from '@/stores/user'
import useCookieStorage from '@/stores/cookieStorage'
import HomeApis from '@/apis/home'
import {ossUpload} from '@/utils/oss.js'
import {ElMessage} from 'element-plus'
import Cookies from 'js-cookie';
import {removeToken} from '@/utils/token'
import useLocalStore from '@/stores/local'
import config from '@/config/index'
import qs from "qs";

const loading = ref(false)
const allowedTypes = 'image/jpeg,image/png,image/webp'
const userStore = useUserStore()
const cookieStorage = useCookieStorage()
const local = useLocalStore();
import {logoutAction} from '@/utils/token.js'

const initObj = {
  nickname: '', imageUrl: '/src/assets/images/avatar.png', password: '',
  phone: '', email: '', sex: '', name: '', birthday: '', introduction: ''
}
const userInfo = ref(JSON.parse(JSON.stringify(initObj)))


function submit() {
  loading.value = true
  UserApis.baseUpdate({...userInfo.value, header: userInfo.value.imageUrl}, {}).then(res => {
    userInfo.value = {
      ...res.data,
      nickname: res.data.name,
      imageUrl: res.data.header,
      password: '',
      phone: res.data.mobile,
      email: '',
      sex: res.data.sex,
      name: res.data.name,
      birthday: '',
      introduction: ''
    }
    userStore.setUserInfo(userInfo.value)
  }).finally(() => {
    loading.value = false
  })
}

function customUpload(options) {

  const {file} = options
  const formData = new FormData()
  formData.append('file', file)

  ossUpload('cdn', file.name, file, (process) => {
  }, (client) => {
    // url = this.$store.state.systemImageConfig[0].imagesHost + client.options.path
    // https://yun-question.oss-cn-beijing.aliyuncs.com/cdn/huikao/jpg/202504/20250406155400985@one.jpg
    // http://yun-question.oss-cn-beijing.aliyuncs.com/cdn/huikao/jpg/202504/20250406155400985@one.jpg
    // https://yun-question.oss-cn-beijing.aliyuncs.com/cdn/huikao/jpg/20250420250406161735177%40one.jpg

    // http://yun-question.oss-cn-beijing.aliyuncs.com/cdn/huikao/jpg/202504/20250406155400985%40one.jpg

    // const lastIndex = client.options.path.lastIndexOf('/')
    // const encodeName=encodeURIComponent(client.options.path.substring(lastIndex+1))
    // const httpsStr = config.cdn_img +( client.options.path).substring(0,lastIndex+1)+encodeName


    const httpsStr = config.cdn_img + (client.options.path)
    userInfo.value.imageUrl = 'http' + httpsStr.substring(5)
  }).then(_ => {

    // 修改入库

    // uploadQrCode('/weixin/qrcode/upload', {
    //     name: this.formData.name,
    //     url
    // }, '').then(_ => {
    //     this.$message.success('上传成功!');
    //     this.getTableData()
    // }).catch(_ => {
    //     console.log(_)
    //     this.$message.error('上传失败!');
    // })
  }).catch(_ => {
    ElMessage({
      message: '上传失败',
      type: 'error'
    });
  })
}

function getDetail() {
  if (userStore.userInfo && userStore.userInfo.id == cookieStorage.userId) {
    //
    // console.log(userStore.userInfo)
    const data = userStore.userInfo
    userInfo.value = {
      ...data,
      nickname: data.name,
      imageUrl: data.header,
      password: '',
      phone: data.mobile,
      email: '',
      sex: data.sex,
      name: data.name,
      birthday: '',
      introduction: ''
    }
  } else {
    UserApis.detail(cookieStorage.userId).then(res => {
      userInfo.value = {
        ...res.data,
        nickname: res.data.name,
        imageUrl: res.data.header,
        password: '',
        phone: res.data.mobile,
        email: '',
        sex: res.data.sex,
        name: res.data.name,
        birthday: '',
        introduction: ''
      }
    })
  }
}

function logout() {
  HomeApis.logout().then(_ => {
    // 清除cookie和localStorage
    logoutAction()
    // 强制更新
    userInfo.value = JSON.parse(JSON.stringify(initObj))
  })
}

getDetail()
</script>
<style scoped>
@media screen and (min-width: 1400px) {
  .userInfo{
    width: 1400px;
  }
}
.userInfo {
  margin: 0 auto;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.userInfo-form {
  background: white;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}

.userInfo-btn {
  min-width: 250px;
  padding: 8px 32px;
}

.userInfoImg {
  border-radius: 50%;
  width: 132px;
  height: 132px;
}

.avatar-uploader {
  display: inline-block;
  width: 132px;
  height: 132px;
  position: relative;
}

.userInfoImgChange {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 32px;
  height: 32px;

  background: url() no-repeat;
  background-size: 100%;
  border-radius: 50%;

}
</style>